<template>
  <div class="box">
    <div
      class="title"
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        padding: 10px;
        font-size: 40px;
        margin-top: 0;
      "
    >
      AI图文创款——鞋履创意设计 增值评价
    </div>

    <div class="box1">
      <div class="box1-0">
        <div class="title">子任务1</div>
        <div>
          <h1 style="margin-left: 10px">子任务1的评分</h1>

          <el-row v-for="item in sortDataList" :key="item">
            <el-col :span="7" style="text-align: center; margin-top: 8px">{{
              item.name
            }}</el-col>
            <el-col :span="6">
              <el-tag size="large" round style="font-size: 15px">{{
                item.value
              }}</el-tag>
            </el-col>
            <el-divider border-style="dotted" style="margin: 8px 0 0 0" />
          </el-row>
        </div>
      </div>
      <div class="box1-1">
        <div class="title">班级整体增值</div>
        <div
          id="chart7"
          style="height: 550px; width: 630px; margin: 0 auto"
        ></div>
      </div>
      <div class="box1-2">
        <div class="title">子任务2</div>
        <div>
          <h1 style="margin-left: 10px">子任务2的评分</h1>

          <el-row v-for="item in sortDataList2" :key="item">
            <el-col :span="7" style="text-align: center; margin-top: 8px">{{
              item.name
            }}</el-col>
            <el-col :span="6">
              <el-tag size="large" round style="font-size: 15px">{{
                item.value
              }}</el-tag>
            </el-col>
            <el-divider border-style="dotted" style="margin: 8px 0 0 0" />
          </el-row>
        </div>
      </div>
    </div>
    <div class="box0">
      <div class="chart1">
        <div class="title">知行组</div>
        <div id="chart1"></div>
      </div>
      <div class="chart2">
        <div class="title">好学组</div>
        <div id="chart2"></div>
      </div>
      <div class="chart3">
        <div class="title">善学组</div>
        <div id="chart3"></div>
      </div>
      <div class="chart4">
        <div class="title">崇学组</div>
        <div id="chart4"></div>
      </div>
      <div class="chart5">
        <div class="title">思行组</div>
        <div id="chart5"></div>
      </div>
      <div class="chart6">
        <div class="title">力行组</div>
        <div id="chart6"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  getCharts();
  getCharts2();
});

const sortDataList = ref([
  { name: "知行组", value: 80.3 },
  { name: "好学组", value: 77.2 },
  { name: "善学组", value: 90.4 },
  { name: "崇学组", value: 83.8 },
  { name: "思行组", value: 85.9 },
  { name: "力行组", value: 85.8 },
]);

const sortDataList2 = ref([
  { name: "知行组", value: 83.3 },
  { name: "好学组", value: 80.5 },
  { name: "善学组", value: 93.2 },
  { name: "崇学组", value: 86.5 },
  { name: "思行组", value: 88.1 },
  { name: "力行组", value: 88.7 },
]);

const dataList = reactive([
  {
    name: "知行组",
    data1: [20.7, 23.7],
    data2: [14.1, 17.1],
    data3: [12.3, 15.3],
    data4: [24.2, 27.2],
  },
  {
    name: "好学组",
    data1: [18.3, 21.3],
    data2: [13.9, 16.9],
    data3: [12.4, 15.4],
    data4: [23.9, 26.9],
  },
  {
    name: "善学组",
    data1: [26.7, 29.7],
    data2: [15.3, 18.3],
    data3: [14.1, 17.1],
    data4: [25.1, 28.1],
  },
  {
    name: "崇学组",
    data1: [20.9, 23.9],
    data2: [15.5, 18.5],
    data3: [13.2, 16.2],
    data4: [24.9, 27.9],
  },
  {
    name: "思行组",
    data1: [22.3, 25.3],
    data2: [16.1, 19.1],
    data3: [12.0, 15.0],
    data4: [25.7, 28.7],
  },
  {
    name: "力行组",
    data1: [21.8, 24.8],
    data2: [13.4, 18.4],
    data3: [11.0, 16.0],
    data4: [26.5, 29.5],
  },
]);

const getCharts = () => {
  for (let i = 0; i < 6; i++) {
    const domMap = document.getElementById("chart" + (i + 1));
    // 清除Echarts默认添加的属性
    domMap.removeAttribute("_echarts_instance_");
    const chart = echarts.init(domMap);
    const option = getOption(
      dataList[i].name,
      dataList[i].data1,
      dataList[i].data2,
      dataList[i].data3,
      dataList[i].data4
    );
    chart.setOption(option);
  }
};

const getCharts2 = () => {
  const chart = echarts.init(document.getElementById("chart7"));
  const option = {
    title: {
      text: "班级整体增值",
      textStyle: {
        color: "white",
      },
      top: 10,
      left: 10,
    },
    legend: {
      data: [
        "总分",
        "AI工具应用(30)",
        "任务成效(20)",
        "特色创新(20)",
        "职业素养(30)",
      ],
      bottom: 20,
      textStyle: {
        fontWeight: "bold",
        color: "white",
      },
    },
    tooltip: {
      trigger: "item",
    },
    xAxis: {
      data: ["子任务1", "子任务2"],
      axisLabel: {
        textStyle: {
          fontSize: 15,
          color: "white",
        },
      },
    },
    yAxis: [
      {
        position: "left",
        max: 100,
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
      },
      {
        position: "right",
        max: 100,
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
      },
    ],
    series: [
      {
        name: "AI工具应用(30)",
        type: "bar",
        data: [26, 27],
        yAxisIndex: 1,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
        stack: "x",
      },
      {
        name: "任务成效(20)",
        type: "bar",
        data: [16, 17],
        yAxisIndex: 1,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
        stack: "x",
      },
      {
        name: "特色创新(20)",
        type: "bar",
        data: [15, 16],
        yAxisIndex: 1,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
        stack: "x",
      },
      {
        name: "职业素养(30)",
        type: "bar",
        data: [25, 26],
        yAxisIndex: 1,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
        stack: "x",
      },
      {
        name: "总分",
        type: "line",
        data: [83.56, 86.71],
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
              fontSize: 30,
            },
          },
        },
      },
    ],
  };
  chart.setOption(option);
};

const getOption = (name, data1, data2, data3, data4) => {
  const option = {
    title: {
      text: name + "成长轨迹",
      textStyle: {
        color: "white",
      },
      top: 10,
      left: 10,
    },
    legend: {
      data: ["AI工具应用", "任务成效", "特色创新", "职业素养"],
      bottom: 20,
      textStyle: {
        fontWeight: "bold",
        color: "white",
      },
    },
    tooltip: {
      trigger: "item",
    },
    xAxis: {
      data: ["子任务1", "子任务2"],
      axisLabel: {
        textStyle: {
          fontSize: 15,
          color: "white",
        },
      },
    },
    yAxis: [
      {
        position: "left",
        max: 100,
        min: 0,
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
      },
      {
        position: "right",
        max: 100,
        min: 0,
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
      },
    ],
    series: [
      {
        name: "AI工具应用",
        type: "bar",
        data: data1,
        yAxisIndex: 1,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
      },
      {
        name: "任务成效",
        type: "bar",
        data: data2,

        yAxisIndex: 1,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
      },
      {
        name: "特色创新",
        type: "bar",
        data: data3,

        yAxisIndex: 1,
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
      },
      {
        name: "职业素养",
        type: "bar",
        data: data4,
        yAxisIndex: 1,

        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
            },
          },
        },
      },
      {
        type: "line",
        data: [
          (data1[0] + data2[0] + data3[0] + data4[0]).toFixed(2),
          (data1[1] + data2[1] + data3[1] + data4[1]).toFixed(2),
        ],
        label: {
          normal: {
            show: true, //开启显示
            position: "top", //柱形上方
            textStyle: {
              //数值样式
              color: "#fff",
              fontSize: 30,
            },
          },
        },
      },
    ],
  };
  return option;
};
</script>

<style scoped lang="scss">
// 科技感主背景
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: linear-gradient(135deg, #1a2a3a 0%, #243f52 100%);
  color: rgb(255, 255, 255);
  padding: 20px;
  box-sizing: border-box;

  // 第一行卡片布局
  .box1 {
    height: 600px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;

    // 科技感卡片样式
    & > div {
      margin: 0 5px;
      background: linear-gradient(
        145deg,
        rgba(50, 67, 116, 0.9) 0%,
        rgba(40, 55, 100, 0.9) 100%
      );
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 158, 255, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(74, 158, 255, 0.2);
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;
      padding: 15px;
      box-sizing: border-box;

      // 卡片悬浮效果
      &:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4),
          0 0 30px rgba(74, 158, 255, 0.2);
        transform: translateY(-2px);
      }

      // 卡片顶部科技感线条
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #4a9eff, transparent);
      }
    }

    .box1-0 {
      width: 25%;
    }

    .box1-1 {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .box1-2 {
      width: 25%;
    }

    .el-row {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  // 第二行卡片布局
  .box0 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    // 统一卡片样式
    & > div {
      margin: 10px 5px;
      background: linear-gradient(
        145deg,
        rgba(50, 67, 116, 0.9) 0%,
        rgba(40, 55, 100, 0.9) 100%
      );
      width: calc(50% - 20px);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 158, 255, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(74, 158, 255, 0.2);
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;

      // 卡片悬浮效果
      &:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4),
          0 0 30px rgba(74, 158, 255, 0.2);
        transform: translateY(-2px);
      }

      // 卡片顶部科技感线条
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #4a9eff, transparent);
      }

      & > div:last-child {
        height: 350px;
      }
    }
  }
}

// 增强科技感标题样式
.title {
  width: 80%;
  height: 30px;
  // max-width: 580px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background: linear-gradient(
    135deg,
    rgb(20, 70, 110) 0%,
    rgb(30, 80, 120) 50%,
    rgb(40, 90, 130) 100%
  );
  border-radius: 12px;
  margin: 15px auto;
  padding: 10px 35px;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 10px rgba(74, 158, 255, 0.5),
    0 0 20px rgba(74, 158, 255, 0.3), 0 0 30px rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.4);
  letter-spacing: 1.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 25px rgba(74, 158, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;

  // 科技感装饰线条
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    animation: glowPulse 3s infinite alternate;
  }

  // 科技感点状图案背景
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
      circle,
      rgba(74, 158, 255, 0.2) 1px,
      transparent 1px
    );
    background-size: 20px 20px;
    opacity: 0.4;
    pointer-events: none;
  }

  // 悬停效果增强
  &:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(74, 158, 255, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
  }

  // 确保文字在最上层
  z-index: 1;
}

// 发光脉冲动画
@keyframes glowPulse {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
</style>